<!--
 * @Description: 弹窗表格
 * @Author: huacong
 * @Date: 2020-11-04 11:15:34
 * @LastEditTime: 2020-11-30 12:36:23
 * @LastEditors: huacong
-->
<template lang="pug">
  el-dialog.tl(
    :title="title"
    :width="width"
    :visible="visibleDialog"
    v-loading="loading"
    element-loading-text="加载中."
    element-loading-background="rgba(255, 255, 255, 0.7)"
    element-loading-customClass="v-loading"
    append-to-body
    center
    @close="$_handleCancel"
  )
    slot(name="alert")
    el-row(:gutter="24")
      el-col(:span="formSpan")
        form-box(
          ref="formBox"
          :items="formItems"
          @cancelHandle="$_handleCancel"
          :disabled="disabled"
          :submitting="submitting"
          :reset="false"
          :cancel="true"
          :labelWidth="labelWidth"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :layoutCol="layoutCol"
          cancelText="取消"
          :submitHandle="formSubmit"
          :showBtns="showBtns"
          :sureText="sureText"
        )
      el-col(:span="24 - formSpan"  v-if="formSpan !== 24")
        slot(name="right")
    slot
</template>
<script>
import FormBox from './FormBox'

export default {
  name: 'ModalForm',
  components: {
    FormBox
  },
  props: {
    labelWidth: {
      type: String,
      default: '100px'
    },
    title: {
      type: String,
      default: '弹窗'
    },
    sureText: {
      type: String,
      default: ''
    },
    width: {
      type: [Number, String],
      default: '520px'
    },
    // 表单的栅格
    formSpan: {
      type: Number,
      default: 24
    },
    // 对外暴露visible属性，用于显示隐藏弹框
    visible: {
      type: Boolean,
      default: false
    },
    layoutCol: {
      type: Object,
      default: () => {
        return { sm: 24, md: 24, lg: 24 }
      }
    },
    showBtns: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 对外暴露submitting属性，用于显示提交按钮的loading状态
    submitting: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    formItems: {
      type: Array,
      default: () => []
    },
    labelCol: {
      type: Number,
      default: 6
    },
    wrapperCol: {
      type: Number,
      default: 18
    },
    formSubmit: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      sureDisabled: false
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    // 对外抛出cancel事件
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
